import React, { useState, useEffect, useRef } from 'react'
import { Button, Image, Upload, Modal, Tag, Radio } from 'antd';

import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const preventDefault = (e) => {
    e.preventDefault();
    console.log('Clicked! But prevent default.');
};
export default function Add() {
    let [value, setValue] = React.useState('')
    let [value2, setValue2] = React.useState('')
    let [cu, setCu] = React.useState('')
    let [flag, setFlag] = React.useState(0)
    let [xie, setXie] = React.useState('')
    let [shan, setShan] = React.useState('')
    let [src, setSrc] = React.useState('https://img2.baidu.com/it/u=1020023070,2966595533&fm=253&fmt=auto&app=138&f=JPEG?w=796&h=500')


    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    let ti = () => {
        setValue('##标题')
        setValue2('##标题')
        setCu('cu')
    }
    const getBase64 = (file) =>
        new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
        });


    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [fileList, setFileList] = useState([
    ]);
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
    };
    const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
    const uploadButton = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            <PlusOutlined />
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );

    let [flag1, setFlag1] = React.useState('0')

    let navigate = useNavigate()

    let add = async () => {
        let arr = {
            title: value,
            // content: content,
            img: 'https://img2.baidu.com/it/u=1020023070,2966595533&fm=253&fmt=auto&app=138&f=JPEG?w=796&h=500',
            z: 45,
            y: 34,
            p: 56,
            s: 20,
        }
        await axios.post('http://localhost:3000/addArticle', arr)
        navigate('/home/list')
        setIsModalOpen(false);
    }

    const [value3, setValue3] = useState(1);
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setValue3(e.target.value);
    };


    return (
        <div>
            <div className="top">
                <Button type="primary" size='large' className='btn4' onClick={() => { ti() }}>
                    标题
                </Button>
                <Button type="primary" size='large' className='btn4' onClick={() => { setXie('italic') }}>
                    斜体
                </Button>
                <Button type="primary" size='large' className='btn4' onClick={() => { setShan('line-through') }}>
                    删除线
                </Button>
                <Button type="primary" size='large' className='btn4' onClick={showModal}>
                    发布
                </Button>
                <Modal title="发布文章" open={isModalOpen} onOk={add} onCancel={handleCancel}>
                    <p>
                        文章标签：
                        <Tag className={flag1 === '0' ? 'tag' : ''} onClick={() => { setFlag1('0') }} closeIcon={<CloseCircleOutlined />} onClose={console.log}>
                            javascript
                        </Tag>
                        <Tag className={flag1 === '1' ? 'tag' : ''} onClick={() => { setFlag1('1') }} closeIcon={<CloseCircleOutlined />} onClose={console.log}>
                            前端2
                        </Tag>
                        <Tag className={flag1 === '2' ? 'tag' : ''} onClick={() => { setFlag1('2') }} closeIcon={<CloseCircleOutlined />} onClose={console.log}>
                            后端
                        </Tag>
                        <Tag className={flag1 === '3' ? 'tag' : ''} onClick={() => { setFlag1('3') }} closeIcon={<CloseCircleOutlined />} onClose={console.log}>
                            css
                        </Tag>
                    </p>

                    <p>
                        <Upload
                            action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
                            listType="picture-circle"
                            fileList={fileList}
                            onPreview={handlePreview}
                            onChange={handleChange}
                        >
                            {fileList.length >= 8 ? null : uploadButton}
                        </Upload>
                    </p>
                    <p>文章类型：
                        <Radio.Group onChange={onChange} value={value3}>
                            <Radio value='原创'>原创</Radio>
                            <Radio value='转载'>转载</Radio>
                            <Radio value='翻译'>翻译</Radio>
                        </Radio.Group>
                    </p>
                    <Button type="primary" size='large' className='btn4' onClick={() => { add() }}>
                        发布
                    </Button>
                </Modal>

                {previewImage && (
                    <Image
                        wrapperStyle={{
                            display: 'none',
                        }}
                        preview={{
                            visible: previewOpen,
                            onVisibleChange: (visible) => setPreviewOpen(visible),
                            afterOpenChange: (visible) => !visible && setPreviewImage(''),
                        }}
                        src={previewImage}
                    />
                )}

            </div>
            {/* <img src={src} alt="" width='300px ' /> */}
            <div style={{display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'column'}}>
                {flag === 0 && <div>
                    <textarea style={{ fontStyle: xie, textDecoration: shan }} id="" rows={50} cols={80} className="textarea" value={value} onChange={(e) => {
                        setValue(e.target.value)
                        setValue2(e.target.value)
                    }}>

                    </textarea>

                    <a className='sp2' onClick={() => { setFlag(2) }}>
                        ♦
                    </a>
                    <a className='sp1' onClick={() => { setFlag(1) }}>
                        👀
                    </a>
                    <textarea style={{ fontStyle: xie, textDecoration: shan }} id={cu} rows={50} cols={70} className="textarea1" value={value2} onChange={(e) => { setValue2(e.target.value) }}></textarea>
                </div>}
                {flag === 1 &&
                    <div className="box1">
                        <p>{value}</p>
                        <button className='btn3' onClick={() => {
                            setFlag(0)
                        }}>返回</button>
                    </div>
                }
                {
                    flag === 2 &&
                    <div className='bian'>
                        <textarea id="text" value={value} cols={80} rows={30} onChange={(e) => {
                            setValue(e.target.value)
                            setValue2(e.target.value)
                        }}>11111111111111111</textarea>
                        <button onClick={() => { setFlag(0) }}>返回</button>
                    </div>
                }
            </div>
        </div>
    )
}
